<!-- Code Field -->
<div class="form-group col-sm-6">
    {!! Form::label('code', '题号：') !!}
    {!! Form::text('code', old('code'), ['class' => 'form-control']) !!}
</div>

<!-- Content Field -->
<div class="form-group col-sm-12 col-lg-12">
    {!! Form::label('content', '问题内容：') !!}
    {!! Form::textarea('content', old('content'), ['class' => 'form-control']) !!}
</div>

<!-- Temp Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('temp_id', '所属问卷：') !!}
    {!! Form::select('temp_id', $baseData['temps'], old('temp_id') ? old('temp_id') : $tempId, ['class' => 'form-control']) !!}
</div>

<!-- Next Id Field -->
<div class="form-group col-sm-6">
    {!! Form::label('next_id', '下一题：') !!}
    {!! Form::select('next_id', $baseData['questions'], old('next_id') ? old('next_id') : null, ['class' => 'form-control']) !!}
</div>

<!-- Type Field -->
<div class="form-group col-sm-6">
    {!! Form::label('type', '问题类型：') !!}
    <label class="checkbox-inline">
        @foreach($baseData['type'] as $k => $v)
            <input name="type" type="radio" id="type_{{ $k }}" value="{{ $k }}" class="radio-inline"> <label for="type_{{ $k }}">{{ $v }}</label>
        @endforeach
    </label>
</div>

<div class="form-group col-sm-6">
    {!! Form::button('添加选项', ['class' => 'btn btn-primary', 'id' => 'addOption']) !!}
</div>

<div class="col-sm-12 form-group" id="simple_option">
    <div class="op_box">
        <label>编号：</label>
        <input type="text" name="simple_option_code[]" value="A" class="form-control code">
        <label>选项：</label>
        <input type="text" name="simple_option_content[]" class="form-control op_content">
        <label>得分：</label>
        <input type="text" name="simple_option_score[]" class="form-control code">
        <button class="btn btn-danger" onclick="rmRow(this)" style="float: right;">移除本行</button>
    </div>
</div>

<div class="col-sm-12 form-group" id="multi_option">
    <div class="op_box row">
        <div class="col-sm-6">
            <label style="width: 8%; float: left; line-height: 34px;">选项：</label>
            <input type="text" name="multi_options[]" class="form-control" style="width: 92%; float: left;">
        </div>
        <div class="col-sm-6">
            {!! Form::button('移除本行', ['class' => 'btn btn-danger', 'onclick' => 'rmRow(this)']) !!}
        </div>
    </div>
</div>

<!-- Submit Field -->
<div class="form-group col-sm-12">
    {!! Form::submit(isset($questions) ? '保存' : '添加', ['class' => 'btn btn-primary']) !!}
    <a href="{{ route('temps.show', ['id' => $tempId]) }}" class="btn btn-default">取消</a>
</div>

<script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script>
    function rmRow(obj) {
        obj.closest('.op_box').remove();
    }

    $(function() {
        $('#multi_option').hide();
        // 数据初始化
        var chkedType = {{ isset($questions->type) ? $questions->type : '1' }};
        chkedType = chkedType.toString();
        $('input:radio[value=' + chkedType+ ']').prop('checked', true);
        $('input:radio').change();

        @if(isset($questions))
            var options = @json($questions->options->toArray());
            $('.op_box').remove();

            var html = '';
            var dom;
            for(let i = 0; i < options.length; i++) {
                if(chkedType === '1') {
                    dom = $('#simple_option');
                    html += '<div class="op_box">';
                    html += '<label>编号：&nbsp;</label>';
                    html += '<input type="text" name="simple_option_code[]" value="' + options[i]['code'] + '" class="form-control code">';
                    html += '<label>选项：&nbsp;&nbsp;</label>';
                    html += '<input type="text" name="simple_option_content[]" value="' + options[i]['content'] + '" class="form-control op_content">';
                    html += '<label>得分：&nbsp;&nbsp;</label>';

                    options[i]['score'] = options[i]['score'] === null ? '' : options[i]['score'];
                    html += '<input type="text" name="simple_option_score[]" value="' + options[i]['score'] + '" class="form-control code">';
                    html += '<button class="btn btn-danger" onclick="rmRow(this)" style="float: right;">移除本行</button>';
                } else if(chkedType === '2') {
                    dom = $('#multi_option');
                    html += '<div class="op_box row">';
                    html += '<div class="col-sm-6">';
                    html += '<label style="width: 8%; float: left; line-height: 34px;">选项：</label>';
                    html += '<input type="text" name="multi_options[]" value="' + options[i]['content'] + '" class="form-control" style="width: 92%; float: left;">';
                    html += '</div>';
                    html += '<div class="col-sm-6">';
                    html += '<button class="btn btn-danger" onclick="rmRow(this)">移除本行</button>';
                    html += '</div>';
                }

                html += '</div>';
            }
            dom.append(html);
        @endif

        // 切换题型事件
        $('input:radio').change(function () {
            var type = $(this).val();
            chkedType = type;
            switch (type) {
                case '1':
                    $('#simple_option').show();
                    $('#multi_option').hide();
                    $('#addOption').show();
                    break;
                case '2':
                    $('#simple_option').hide();
                    $('#multi_option').show();
                    $('#addOption').show();
                    break;
                default:
                    $('#simple_option').hide();
                    $('#multi_option').hide();
                    $('#addOption').hide();
                    break;
            }
        });

        // 添加选项事件
        $('#addOption').click(function() {
            var dom;
            var html = '';
            if(chkedType === '1') {
                dom = $('#simple_option');
                html += '<div class="op_box">';
                html += '<label>编号：&nbsp;</label>';
                html += '<input type="text" name="simple_option_code[]" class="form-control code">';
                html += '<label>选项：&nbsp;&nbsp;</label>';
                html += '<input type="text" name="simple_option_content[]" class="form-control op_content">';
                html += '<label>得分：&nbsp;&nbsp;</label>';
                html += '<input type="text" name="simple_option_score[]" class="form-control code">';
                html += '<button class="btn btn-danger" onclick="rmRow(this)" style="float: right;">移除本行</button>';
            } else if(chkedType === '2') {
                dom = $('#multi_option');
                html += '<div class="op_box row">';
                html += '<div class="col-sm-6">';
                html += '<label style="width: 8%; float: left; line-height: 34px;">选项：</label>';
                html += '<input type="text" name="multi_options[]" class="form-control" style="width: 92%; float: left;">';
                html += '</div>';
                html += '<div class="col-sm-6">';
                html += '<button class="btn btn-danger" onclick="rmRow(this)">移除本行</button>';
                html += '</div>';
            }

            html += '</div>';

            dom.append(html);
        });
    });
</script>